<template>
  <div>
    <div>审批打折政策</div>
    <div>
      <span>搜索: <input type="text" v-model="sousuosujv"/></span>
      <el-button icon="el-icon-search" circle @click="sousuo"></el-button>
    </div>
    <hr/>
    <el-table
      :data="sujv"
      style="width: 100%">
      <el-table-column type="expand" label="详情">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="开始日期">
              <span>{{ props.row.startDate }}</span>
            </el-form-item>
            <el-form-item label="结束日期">
              <span>{{ props.row.endDate }}</span>
            </el-form-item>
            <el-form-item label="申请人">
              <span>{{ props.row.userName }}</span>
            </el-form-item>
            <el-form-item label="打折率">
              <span>{{ props.row.discountsRate }}</span>
            </el-form-item>
            <el-form-item label="描述">
              <span>{{ props.row.activitiesDescribe }}</span>
            </el-form-item>
            <el-form-item label="审核流程编号">
              <span>{{ props.row.approvalProcessIdCode }}</span>
            </el-form-item>

          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        label="活动ID">
        <template slot-scope="scope">
          <span>{{ scope.row.activitiesId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="活动名称">
        <template slot-scope="scope">
          <span>{{ scope.row.activitiesName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="产品名称">
        <template slot-scope="scope">
          <span>{{ scope.row.productName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="交易操作">
        <template slot-scope="scope">

          <el-button size="mini" type="success" @click="tongguo(scope.$index, scope.row)">
            通过
          </el-button>

          <el-button size="mini" type="danger" @click="fiujue(scope.$index, scope.row)">
            否决
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[1,2,3]"
      :page-size="currentPage4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="zpage">
    </el-pagination>

    <!--@size-change这个是下拉变动后触发一个事件-->
    <!--@current-change页码被点击或切换触发的一个事件-->
    <!--current-page当前显示是哪一页的数据-->
    <!--page-size这是那一页?-->
  </div>
</template>

<script>
export default {
  name: 'HelloVue',
  data () {
    return {
      sujv: [],
      currentPage4: 20,
      page: 1,
      zpage: 1,
      multipleSelection: [],
      a: [],
      b: [],
      sousuosujv: []
    }
  },
  created: function () {
    var chansu = this.$qs.stringify({ page: this.page, limit: this.currentPage4, userId: this.$store.getters.getUserInfo.user })
    var that = this
    this.$axios.post('queryApprovalDiscounts', chansu).then(function (res) {
      window.console.log(res)
      that.sujv = res.data.data
      that.zpage = Math.ceil(res.data.count)
      for (var i = 0; i < that.sujv.length; i++) {
        that.sujv[i].startDate = that.formatDate(new Date(that.sujv[i].startDate))
        that.sujv[i].endDate = that.formatDate(new Date(that.sujv[i].endDate))
      }
    })
  },
  methods: {
    sousuo () {
      window.console.log(typeof (this.sousuosujv[0]))
      var chansu = this.$qs.stringify({
        page: this.page,
        limit: this.currentPage4,
        userId: this.$store.getters.getUserInfo.user,
        activitiesId: this.sousuosujv
      })
      var that = this
      this.$axios.post('queryApprovalDiscounts',
        chansu
      ).then(function (res) {
        window.console.log(res)
        that.sujv = res.data.data
        that.zpage = Math.ceil(res.data.count)
      })
    },
    fiujue (index, row) {
      var chansu = this.$qs.stringify({
        approvalProcessIdCode: row.approvalProcessIdCode,
        userId: this.$store.getters.getUserInfo.user,
        approvalStatusId: 3
      })
      var chansu2 = this.$qs.stringify({ page: this.page, limit: this.currentPage4, userId: this.$store.getters.getUserInfo.user })
      var that = this
      this.$axios.post('approvalDiscounts', chansu).then(function (res) {
        window.console.log(res)
        if (res.data.code === 200) {
          window.console.log('111')
          that.$axios.post('queryApprovalDiscounts', chansu2).then(function (res) {
            window.console.log(res)
            that.sujv = res.data.data
            that.zpage = Math.ceil(res.data.count)
            for (var i = 0; i < that.sujv.length; i++) {
              that.sujv[i].startDate = that.formatDate(new Date(that.sujv[i].startDate))
              that.sujv[i].endDate = that.formatDate(new Date(that.sujv[i].endDate))
            }
          })
        }
      })
    },
    tongguo (index, row) {
      var chansu = this.$qs.stringify({
        approvalProcessIdCode: row.approvalProcessIdCode,
        userId: this.$store.getters.getUserInfo.user,
        approvalStatusId: 2
      })
      var chansu2 = this.$qs.stringify({ page: this.page, limit: this.currentPage4, userId: this.$store.getters.getUserInfo.user })
      var that = this
      this.$axios.post('approvalDiscounts', chansu).then(function (res) {
        window.console.log(res)
        if (res.data.code === 200) {
          window.console.log('111')
          that.$axios.post('queryApprovalDiscounts', chansu2).then(function (res) {
            window.console.log(res)
            that.sujv = res.data.data
            that.zpage = Math.ceil(res.data.count)
            for (var i = 0; i < that.sujv.length; i++) {
              that.sujv[i].startDate = that.formatDate(new Date(that.sujv[i].startDate))
              that.sujv[i].endDate = that.formatDate(new Date(that.sujv[i].endDate))
            }
          })
        }
      })
    },
    handleSizeChange (newsize) {
      window.console.log(newsize)
      this.currentPage4 = newsize
      var chansu = this.$qs.stringify({ page: this.page, limit: this.currentPage4, userId: this.$store.getters.getUserInfo.user })
      var that = this
      this.$axios.post('queryApprovalDiscounts', chansu).then(function (res) {
        window.console.log(res)
        that.sujv = res.data.data
        that.zpage = Math.ceil(res.data.count)
        for (var i = 0; i < that.sujv.length; i++) {
          that.sujv[i].startDate = that.formatDate(new Date(that.sujv[i].startDate))
          that.sujv[i].endDate = that.formatDate(new Date(that.sujv[i].endDate))
        }
      })
    },
    handleCurrentChange (newpage) {
      window.console.log(newpage)
      this.page = newpage
      var chansu = this.$qs.stringify({ page: this.page, limit: this.currentPage4, userId: this.$store.getters.getUserInfo.user })
      var that = this
      this.$axios.post('queryApprovalDiscounts', chansu).then(function (res) {
        window.console.log(res)
        that.sujv = res.data.data
        that.zpage = Math.ceil(res.data.count)
        for (var i = 0; i < that.sujv.length; i++) {
          that.sujv[i].startDate = that.formatDate(new Date(that.sujv[i].startDate))
          that.sujv[i].endDate = that.formatDate(new Date(that.sujv[i].endDate))
        }
      })
    }
  }
}
</script>

<style>
  span {
    margin-right: 20px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33.33333333%;

  }
</style>
